<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/incubator-echarts-4.5.0/dist/echarts.js"></script>
    <script src="js/show.js"></script>
    <script src="js/menu.js"></script>
    <script src="js/prefix.js"></script>
    <script src="js/welcome.js"></script>
    <link rel="stylesheet" href="css/show.css">
    <link rel="stylesheet" href="css/menu.css">
    <style>
        .main{
            width: 100%;
            height: 400px;
            margin: 20px auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="menu"></div>
<div class="out">
    <div class="left">
        <div class="left-top">
<!--            <audio src="music/DAISHI%20DANCE,Cecile%20Corbel%20-%20Take%20me%20hand.mp3" autoplay="autoplay" loop="loop" controls="controls">-->
<!--            Your browser does not support the audio tag.-->
<!--            </audio>-->
        </div>
        <div class="left-content left1">
            <input type="button" class="btn" value="查看过去N天的支出总数图（2<=N<=31）" onclick="clickBtn1()">
        </div>
        <div class="left-content left2">
            <input type="button" class="btn" value="查看过去N天的支出详细图（2<=N<=31）" onclick="clickBtn2()">
        </div>
        <div class="left-content left3">
            <input type="button" class="btn" value="查看支出饼状图" onclick="clickBtn3()">
        </div>
        <div class="left-content left4"></div>
    </div>
    <div class="right" id="right1">
        <div class="right-up">
            <p class="p1">输入天数：<input type="number" id="targetDays1" max="31" min="2" onchange="drawLineChart(this.value)"></p>
        </div>
        <div id="main1" class="main">

        </div>
    </div>
    <div class="right" id="right2">
        <div class="right-up">
            <p class="p1">输入天数：<input type="number" id="targetDays2" max="31" min="2" onchange="drawBarChart(this.value)"></p>
        </div>
        <div id="main2" class="main">

        </div>
    </div>

    <div class="right" id="right3">
        <div class="right-up">
            <p class="p1">选择要查询的月份

            </p>
            <select id="sel_year">
                <option value="0">请选择年份</option>
                <option value="2023">2023</option>
                <option value="2022">2022</option>
                <option value="2021">2021</option>
                <option value="2020">2020</option>
                <option value="2019">2019</option>
                <option value="2018">2018</option>
            </select>
            年
            <select id="sel_month">
                <option value="0">请选择月份</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>月
            <input type="button" value="查询" onclick="query()">
        </div>
        <div id="main3" class="main">

        </div>
    </div>
    <div class="right" id="right4">
        <div class="right-up">

        </div>
        <div class="main hint">
            <a class="page" href="javascript:lastImg()">&uarr;</a>
            <h1 class="text-hint">点击左侧按钮，图片将在此处显示<br/>点击箭头翻看效果图</h1>
            <img src="" alt="" class="imgs">
            <a class="page" href="javascript:nextImg()">&darr;</a>
        </div>
    </div>

</div>
</body>
</html>
<script>
    var imgList=['demo1.png','demo2.png','demo3.png'];
    var len=imgList.length;
    var curIndex=-1;
    function lastImg() {
        $(".text-hint").hide();
        if(curIndex==-1){
            curIndex=2;
        }else{
            curIndex=curIndex==0?len-1:curIndex-1;
        }
        var img='images/'+imgList[curIndex];
        $(".imgs").attr('src',img);
    }
    function nextImg() {
        $(".text-hint").hide();
        curIndex=(curIndex+1)%len;
        var img='images/'+imgList[curIndex];
        $(".imgs").attr('src',img);
    }
</script>